{% extends "page_base.html" %}

{% load static %}
{% load i18n %}
{% load inventree_extras %}

{% block page_title %}
{% inventree_title %} | {% trans "Company" %} - {{ company.name }}
{% endblock page_title %}

{% block heading %}
{% trans "Company" %}: {{ company.name }}
{% endblock heading %}

{% block actions %}
<!-- Admin View -->
{% admin_url user "company.company" company.pk as url %}
{% include "admin_button.html" with url=url %}

{% if company.is_supplier and roles.purchase_order.add %}
<button type='button' class='btn btn-outline-primary' id='company-order-2' title='{% trans "Create Purchase Order" %}'>
    <span class='fas fa-shopping-cart'/>
</button>
{% endif %}
{% define perms.company.change_company or perms.company.delete_company as has_permission %}
{% if has_permission %}
<button id='company-edit-actions' title='{% trans "Company actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
    <span class='fas fa-tools'></span> <span class='caret'></span>
</button>
<ul class='dropdown-menu' role='menu'>
    {% if perms.company.change_company %}
    <li><a class='dropdown-item' href='#' id='company-edit' title='{% trans "Edit company information" %}'>
        <span class='fas fa-edit icon-green'></span> {% trans "Edit Company" %}
    </a></li>
    {% endif %}
    {% if perms.company.delete_company %}
    <li><a class='dropdown-item' href='#' id='company-delete' title='{% trans "Delete company" %}'>
        <span class='fas fa-trash-alt icon-red'></span> {% trans "Delete Company" %}
    </a></li>
    {% endif %}
</ul>
{% endif %}
{% endblock actions %}

{% block thumbnail %}
<div class='dropzone part-thumb-container' id='company-thumb'>
    <img class="part-thumb" id='company-image' alt="{% trans 'Part image' %}"
    {% if company.image %}
    src="{{ company.image.preview.url }}"
    {% else %}
    src="{% static 'img/blank_image.png' %}"
    {% endif %}/>
    <div class='btn-row part-thumb-overlay'>
        <div class='btn-group' role='group'>
            <button type='button' class='btn btn-outline-secondary' title='{% trans "Upload new image" %}' id='company-image-upload'><span class='fas fa-file-upload'></span></button>
            {% settings_value "INVENTREE_DOWNLOAD_FROM_URL" as allow_download %}
            {% if allow_download %}
            <button type='button' class='btn btn-outline-secondary' title="{% trans 'Download image from URL' %}" id='company-image-url'><span class='fas fa-cloud-download-alt'></span></button>
            {% endif %}
            <button type='button' class='btn btn-outline-secondary' title='{% trans "Delete image" %}' id='company-image-delete'><span class='fas fa-trash-alt icon-red'></span></button>
        </div>
    </div>
</div>
{% endblock thumbnail %}

{% block details %}
<table class='table table-striped table-condensed'>
    <col width='25'>
    <tr>
        <td><span class='fas fa-info-circle'></span></td>
        <td>{% trans "Description" %}</td>
        <td>{{ company.description }}</td>
    </tr>
    <tr>
        <td><span class='fas fa-industry'></span></td>
        <td>{% trans "Manufacturer" %}</td>
        <td>{% include "yesnolabel.html" with value=company.is_manufacturer %}</td>
    </tr>
    <tr>
        <td><span class='fas fa-building'></span></td>
        <td>{% trans "Supplier" %}</td>
        <td>{% include 'yesnolabel.html' with value=company.is_supplier %}</td>
    </tr>
    <tr>
        <td><span class='fas fa-user-tie'></span></td>
        <td>{% trans "Customer" %}</td>
        <td>{% include 'yesnolabel.html' with value=company.is_customer %}</td>
    </tr>
</table>

{% endblock details %}

{% block details_right %}

<table class="table table-striped table-condensed">
    <col width='25'>
{% if company.website %}
<tr>
    <td><span class='fas fa-globe'></span></td>
    <td>{% trans "Website" %}</td>
    <td><a href="{{ company.website }}">{{ company.website }}</a>{% include "clip.html" %}</td>
</tr>
{% endif %}
<tr>
    <td><span class='fas fa-dollar-sign'></span></td>
    <td>{% trans "Currency" %}</td>
    <td>
        {% if company.currency %}
        {{ company.currency }}
        {% else %}
        <em>{% trans "Uses default currency" %}</em>
        {% endif %}
    </td>
</tr>
{% if company.address %}
<tr>
    <td><span class='fas fa-map-marked-alt'></span></td>
    <td>{% trans "Address" %}</td>
    <td>{{ company.address }}{% include "clip.html" %}</td>
</tr>
{% endif %}
{% if company.phone %}
<tr>
    <td><span class='fas fa-phone'></span></td>
    <td>{% trans "Phone" %}</td>
    <td>{% include "tel.html" with tel=company.phone %}</td>
</tr>
{% endif %}
{% if company.email %}
<tr>
    <td><span class='fas fa-at'></span></td>
    <td>{% trans "Email" %}</td>
    <td>{% include "mail.html" with mail=company.email %}</td>
</tr>
{% endif %}
{% if company.contact %}
<tr>
    <td><span class='fas fa-user'></span></td>
    <td>{% trans "Contact" %}</td>
    <td>{{ company.contact }}{% include "clip.html" %}</td>
</tr>
{% endif %}
</table>
{% endblock details_right %}

{% block js_ready %}
{{ block.super }}

    $('#company-edit').click(function() {
        editCompany({{ company.id }});
    });

    $("#company-order-2").click(function() {
        createPurchaseOrder({
            supplier: {{ company.pk }},
        });
    });

    $('#company-delete').click(function() {
        constructForm('{% url "api-company-detail" company.pk %}', {
            method: 'DELETE',
            title: '{% trans "Delete Company" %}',
            redirect: '{% url "company-index" %}',
        });
    });

    function reloadImage(data) {
        if (data.image) {
            $('#company-image').attr('src', data.image);

            // Reset the "modal image" view
            $('#company-image').click(function() {
                showModalImage(data.image);
            });

            $('#company-image-delete').show();
        } else {
            location.reload();
        }
    }

    enableDragAndDrop(
        "#company-thumb",
        "{% url 'api-company-detail' company.id %}",
        {
            label: 'image',
            method: 'PATCH',
            success: function(data, status, xhr) {
                reloadImage(data);
            }
        }
    );

    {% if company.image %}
    $('#company-image').click(function() {
        showModalImage('{{ company.image.url }}');
    });
    {% else %}
    $('#company-image-delete').hide();
    {% endif %}

    $('#company-image-delete').click(function(event) {
        event.stopPropagation();
        showQuestionDialog(
            '{% trans "Remove Image" %}',
            '{% trans "Remove associated image from this company" %}',
            {
                accept_text: '{% trans "Remove" %}',
                submitClass: 'danger',
                accept: function() {
                    inventreePut(
                        '{% url "api-company-detail" company.pk %}',
                        {
                            'image': null,
                        },
                        {
                            method: 'PATCH',
                            success: function() {
                                location.reload();
                            }
                        }
                    );
                }
            }
        );
    });

    $("#company-image-upload").click(function(event) {
        event.stopPropagation();
        constructForm(
            '{% url "api-company-detail" company.pk %}',
            {
                method: 'PATCH',
                fields: {
                    image: {},
                },
                title: '{% trans "Upload Image" %}',
                onSuccess: function(data) {
                    reloadImage(data);
                }
            }
        );
    });

    if (global_settings.INVENTREE_DOWNLOAD_FROM_URL) {
        $('#company-image-url').click(function() {
            event.stopPropagation();
            constructForm(
                '{% url "api-company-detail" company.pk %}',
                {
                    method: 'PATCH',
                    title: '{% trans "Download Image" %}',
                    fields: {
                        remote_image: {},
                    },
                    onSuccess: function(data) {
                        reloadImage(data);
                    }
                }
            );
        });
    }

{% endblock js_ready %}
